<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员添加</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<style>
    .c {
        width: 800px;
    }
    .layui-form-radio:hover *,
    .layui-form-radioed,
    .layui-form-radioed>i {
        color: #409eff;
    }
</style>

<body>
    <div>
        <form class="layui-form" id="film_add" style="margin-top: 20px;margin-left: 10px;">

            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span>用户名：</label>
                <div class="layui-input-block">
                    <input type="text" id="userName" required class="layui-input required c" name="userName"
                        placeholder="请输入用户名">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span>密码：</label>
                <div class="layui-input-block">
                    <input type="password" id="password" required class="layui-input required c" name="password"
                        placeholder="请输入密码">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span>真实姓名：</label>
                <div class="layui-input-block">
                    <input type="text" id="realName" required class="layui-input required c" name="realName"
                        placeholder="请输入真实姓名">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">手机：</label>
                <div class="layui-input-block">
                    <input type="text" id="" required class="layui-input required c" name="phone" placeholder="请输入手机">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">性别：</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" id="" title="男" checked>
                    <input type="radio" name="sex" value="女" id="" title="女">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">年龄：</label>
                <div class="layui-input-block">
                    <input type="text" id="" name="age" required class="layui-input required c" placeholder="请输入年龄">
                </div>
            </div>

            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label">身份：</label>
                <div class="layui-input-block">
                    <input type="text" id="" required class="layui-input required" name="role" value="3"
                        readonly="readonly">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">出生日期：</label>
                <div class="layui-input-block">
                    <input type="text" name="birthday" id="birthday" required placeholder="yyyy-mm-dd" lay-verify="date"
                        autocomplete="off" class="layui-input c">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">头像：</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <img id="pic" src="../image/default.jpg" style="width:80px;height:80px" />

                        <button type="button" class="layui-btn" id="test01">
                            <i class="layui-icon">&#xe67c;</i>浏览图片
                        </button>
                        <button type="button" class="layui-btn" id="btn_ok">
                            <i class="layui-icon">&#xe67c;</i>确定上传
                        </button>
                        <input type="hidden" name="filmpicture" id="fileName" value="picture.jpg">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-normal" lay-filter="demo1" id="addBnt"
                        lay-event="addUser" style="border-radius: 4px;">
                        <i class="layui-icon">&#xe621;</i>立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary" style="border-radius: 4px;"><i
                            class="layui-icon">&#xe9aa;</i>重置</button>
                </div>
            </div>
        </form>
    </div>



    <script src="../layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="js/over/user_add.js"></script>
    <script>
    </script>
</body>
<script>
    //头像的上传
    layui.use(['jquery', 'table', 'layer', 'form', 'upload'], function () {
        //获取各模块的实例
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var upload = layui.upload;

        //上传接口
        var uploadInst = upload.render({
            elem: '#test01',				//绑定浏览文件元素
            url: '', //实现上传功能的服务器端程序
            accept: 'file',				//设置允许上传的文件类型
            bindAction: '#btn_ok', 		//绑定提交上传的按钮
            exts: 'jpg|png|jpeg',			//设置允许上传的文件后缀
            size: 20000,					//设计允许上传文件的大小，单位：KB
            field: "attach",				//绑定上传控件的字段名，便于服务器获取上传文件
            auto: false,					//设置不自动上传
            done: function (dto) {			//上传成功的回调
                //res参数：服务器响应回来的数据，可以封装为responseData对象
                console.info(dto.value);
                //$("#pic").prop("src","${pageContext.request.contextPath}/upload/tx/"+res.data) ;
                //上传成功后，隐藏按钮，防止上传多次
                $("#btn_ok").hide();
                //上传成功后，把隐藏域里面的内容设置为获取的参数值
                $("#fileName").val(dto.value);
                layer.msg('上传成功', { icon: 1 });

            },
            error: function () {			//上传失败的回调
                //请求异常回调
                layer.msg('图片上传失败~~', { icon: 5 });
            },
            choose: function (obj) {		//选择文件后的回调
                obj.preview(function (index, file, result) {
                    //console.log(index); 	//得到文件索引
                    //console.log(file); 		//得到文件对象
                    //console.log(result); 	//得到文件base64编码，比如图片

                    //显示图片
                    $("#pic").prop("src", result);
                });

                //显示提交按钮
                $("#btn_ok").show();
            }
        });
    });
</script>

</html>